<template>
	<!-- index.wxml -->
	<view class="container">
		<swiper class="swiper" :indicator-dots="false" autoplay :interval="4000" :duration="1000" :circular="true"
			previous-margin="30rpx" next-margin="30rpx">
			<block v-for="(item, index) in imgList" :key="index">
				<swiper-item class="swiper-item" data-link-type="h5" :data-link="item.url" @tap="handleJumpFromBanner">
					<view class="row">
						<view class="col">
							<image class="banner-image" :src="item.path" background-size="cover"></image>
						</view>
					</view>
				</swiper-item>
			</block>
		</swiper>
		<view class="currency-work">
			<view class="work-item" v-for="(item, index) in modularList" :key="index">
				<view class="item-box" :data-link="item.link" @click="handleJumpFromTable(item.link)">
					<image class="item-img" :src="item.src"></image>
					<text class="item-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
		<view class="currency-work order-work" v-if="powerType == '1' || powerType == '2'">
			<view class="work-item" v-for="(item, index) in orderModularList" :key="index">
				<view class="item-box" :data-link="item.link" @tap="handleJumpFromTableq">
					<image class="item-img" :src="item.src"></image>
					<text class="item-text">{{ item.text }}</text>
				</view>
			</view>
		</view>
		<van-toast id="van-toast" />
		<uv-tabbar :value="value" :fixed="true" @change="index=>value = index">
			<uv-tabbar-item @click="click('/pages/staff/index/index')" text="首页" icon="home"></uv-tabbar-item>
			<uv-tabbar-item @click="click('/pages/staff/mine/mine')" text="我的" icon="account"></uv-tabbar-item>
		</uv-tabbar>
	</view>
</template>

<script>
	//index.js
	//获取应用实例
	export default {
		data() {
			return {
				value: 0,
				imgList: [{
						path: '/static/staff_index/banner/customer-banner.png',
						linkType: 'page',
						url: '/pages/attendance/attendance'
					},
					{
						path: '/static/staff_index/banner/enter-banner.png',
						linkType: 'page',
						url: '/pages/attendance/attendance'
					},
					{
						path: '/static/staff_index/banner/register-banner.png',
						linkType: 'miniProgram',
						url: 'https://ecuat.tk.cn/'
					}
				],
				modularList: [{
						src: '/static/staff_index/attendance.png',
						text: '考勤打卡',
						type: 'attendance',
						link: '/pages/staff/attendance/attendance'
					},

				],
				// orderModularList: [{
				// 		src: '/static/assets/images/modular/staff-management.png',
				// 		text: '员工管理',
				// 		type: 'staffManagement',
				// 		link: '/pages/staff-management/staff-management'
				// 	},
				// 	{
				// 		src: '/static/assets/images/modular/employee-reward.png',
				// 		text: '员工奖励卡',
				// 		type: 'employeeReward',
				// 		link: '/pages/reward-card/reward-card'
				// 	}
				// ],
				powerType: '1',
				agentName: ''
			};
		},
		methods: {
			// 主题表格部分 跳转处理
			handleJumpFromTable(link) {
				console.log(link);
				if (link) {
					uni.navigateTo({
						url: link
					});
				}
			},
			//底部跳转
			click(e){
				console.log(e)
				uni.navigateTo({
					url: e
				});
			}
		}
	}
</script>
<style>
	page {
		background: #fafafa;
	}

	.container {
		padding: 15rpx 0 100rpx 0;
		width: 100%;
		background: #fafafa;
	}

	.swiper {
		width: 100%;
		height: 230rpx;
	}

	.swiper .swiper-item {
		border-radius: 10rpx;
		overflow: hidden;
	}

	.swiper .swiper-item .row {
		width: 100%;
	}

	.swiper-item .row .col {
		width: 670rpx;
		margin: 0 auto;
	}

	.banner-image {
		width: 100%;
		height: 230rpx;
		border-radius: 10rpx;
	}

	.currency-work {
		display: flex;
		align-content: flex-start;
		flex-flow: row wrap;
		margin: 24rpx auto 0;
		width: 670rpx;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 6rpx 1rpx #ededed;
		box-shadow: 1rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.14);
	}

	.work-item {
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		flex: 0 0 33.33%;
		height: 230rpx;
		border-right: 1rpx solid #eeeeee;
		border-bottom: 1rpx solid #eeeeee;
	}

	.work-item:nth-child(3n) {
		border-right: none;
	}

	.item-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 22rpx;
	}

	.item-img {
		width: 72rpx;
		height: 72rpx;
	}

	.item-text {
		margin-top: 15rpx;
		line-height: 22rpx;
	}

	.order-work {
		margin-top: 45rpx;
	}
</style>